<template>
	<div class="system-user-container">
		<el-row :gutter="20" justify="space-between">
			<el-col class="iemt_pad" :span="6"> 项目名称?供货商发票台账</el-col>
		</el-row>

		<vxe-table
			border
			resizable
			show-overflow
			show-footer
			:data="tableData2"
			:edit-config="{ trigger: 'click', mode: 'row' }"
			@checkbox-all="selectAllChangeEvent1"
			@checkbox-change="selectChangeEvent1"
			:footer-method="footerMethod"
		>
			<vxe-colgroup title="时间" align="center" :edit-render="{ name: 'input', attrs: { type: 'text' } }"> </vxe-colgroup>

			<vxe-column field="单位名称" title="单位名称" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>

			<vxe-column field="不含税开票额" title="不含税开票额" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
			<vxe-column field="进项税额" title="进项税额" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
			<vxe-column field="支付金额" title="支付金额" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
			<vxe-column field="含税开票金额" title="含税开票金额" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
			<vxe-column field="付款金额" title="付款金额" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
		</vxe-table>
		<div>
			<el-row :gutter="20" justify="space-between">
				<el-col class="iemt_pad" :span="6"> 审批：?</el-col>
				<el-col class="iemt_pad" :span="6"> 复核：</el-col>
				<el-col class="iemt_pad" :span="6"> 出纳：</el-col>
			</el-row>
			<el-row :gutter="20" justify="space-between">
				<el-col class="iemt_pad" :span="6"> 制表人：</el-col>
				<el-col class="iemt_pad" :span="6"> 收款人：</el-col>
			</el-row>
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, ref, toRaw, onMounted } from 'vue';
import { axios_feeSplitting_update, axios_feeSplitting_getInfo } from '/@/api/system/feeSplitting';
import { ElMessage, ElMessageBox } from 'element-plus';
import { VxeTablePropTypes } from 'vxe-table';
export default {
	name: 'SupplierInvoice',
	setup() {
		const xTable1 = ref({} as VxeTableInstance);
		const tableData2 = ref([
			{
				id: 10001,
				name: 'Test1',
				nickname: 'T1',
				role: 'Develop',
				sex: '0',
				sex2: ['0'],
				num1: 40,
				age: 28,
				address: 'Shenzhen',
				date12: '',
				date13: '',
			},
			{
				id: 10002,
				name: 'Test2',
				nickname: 'T2',
				role: 'Designer',
				sex: '1',
				sex2: ['0', '1'],
				num1: 20,
				age: 22,
				address: 'Guangzhou',
				date12: '',
				date13: '2020-08-20',
			},
			{
				id: 10003,
				name: 'Test3',
				nickname: 'T3',
				role: 'Test',
				sex: '0',
				sex2: ['1'],
				num1: 200,
				age: 32,
				address: 'Shanghai',
				date12: '2020-09-10',
				date13: '',
			},
			{
				id: 10004,
				name: 'Test4',
				nickname: 'T4',
				role: 'Designer',
				sex: '1',
				sex2: ['1'],
				num1: 30,
				age: 23,
				address: 'Shenzhen',
				date12: '',
				date13: '2020-12-04',
			},
		]);

		const sexList2 = ref([
			{ label: '', value: '' },
			{ label: '男', value: '1' },
			{ label: '女', value: '0' },
		]);

		const selectAllChangeEvent1: VxeTableEvents.CheckboxAll = ({ checked, records }: any) => {
			console.log(checked ? '所有勾选事件' : '所有取消事件', records);
		};

		const selectChangeEvent1: VxeTableEvents.CheckboxChange = ({ checked, records }: any) => {
			console.log(checked ? '勾选事件' : '取消事件', records);
		};

		const getSelectEvent1 = () => {
			const $table = xTable1.value;
			const selectRecords = $table.getCheckboxRecords();
			VXETable.modal.alert(`${selectRecords.length}条数据`);
		};

		const sexList1 = ref([
			{ label: '12', value: '1' },
			{ label: '男', value: '1' },
			{ label: '女', value: '0' },
		]);

		const footerMethod: VxeTablePropTypes.FooterMethod = ({ columns, data }) => {
			return [
				columns.map((column, columnIndex) => {
					console.log(columnIndex, '1');

					if (columnIndex === 3) {
						return '合计';
					}
					if (columnIndex === 3) {
						//  return `${sumNum(data, 'number')} 本`
						return `12 本`;
					} else if (columnIndex === 4) {
						// return `共 ${countAllAmount(data)} 元`;
						return `共 12 元`;
					}
					return '-';
				}),
			];
		};

		return {
			sexList1,
			tableData2,
			sexList2,
			selectAllChangeEvent1,
			selectChangeEvent1,
			input: ref(''),
			footerMethod,
		};
	},
};
</script>

<style scoped lang="scss">
.iemt_pad {
	padding: 20px 0;
}
</style>
